<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="title">
		<title>The Change | Thêm nhân viên</title>
		<h:outputStylesheet library="css" name="jquery-ui-1.8.20.custom.css" />
		<h:outputScript library="js" name="jquery-ui-1.8.20.custom.min.js" />
		<script type="text/javascript">
			$("document").ready(function(){
				$(".date-picker").datepicker({ changeMonth: true , changeYear: true ,
					dateFormat: 'yy-mm-dd',yearRange: '1900:2050'});				
			});
		</script>
	</ui:define>
	<ui:define name="lcontent">
		<ui:include src="/template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<h:form id="form">
			<f:event listener="#{employee.onloadAddNew}" type="preRenderView"></f:event>
			<f:event listener="#{utilBean.initDepartment}" type="preRenderView"></f:event>
			<f:event listener="#{utilBean.initBranch}" type="preRenderView"></f:event>
			<f:event listener="#{utilBean.initDesignation}" type="preRenderView"></f:event>
			<span class="rtitle">Thêm nhân viên mới</span>
			<hr />
			<h:commandLink styleClass="button-link green-bt load" action="#{employee.insert}">
	            Lưu
	        </h:commandLink>
			<a class="button-link white-bt" href="#{facesContext.externalContext.requestContextPath}/human-resources/employee.html"> Hủy bỏ </a>
			<span class="clear"></span>
			<br />
			<div class="input-panel">
				<span class="input-title">Thông tin cá nhân</span>
				<table class="input-column w100">
					<tr>
						<td class="w50">
							<div class="input-item">
								<span class="block required">Họ <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" />
								</span>
								<h:inputText id="lastname" required="true" styleClass="input w80"
									requiredMessage="Họ không được để trống" maxlength="50"
									value="#{employee.staff_add.lastname}"></h:inputText>
							</div>
							<div class="input-item">
								<span class="block required">Tên <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" />
								</span>
								<h:inputText id="firtname" required="true" styleClass="input w80"
									requiredMessage="Tên không được để trống" maxlength="50"
									value="#{employee.staff_add.firstname}"></h:inputText>
							</div>
							<div class="input-item">
								<span class="block">Giới tính</span>
								<h:selectOneMenu id="gender" styleClass="input w50" value="#{employee.staff_add.gender}">
									<f:selectItem itemValue="1" itemLabel="Nam"></f:selectItem>
									<f:selectItem itemValue="2" itemLabel="Nữ"></f:selectItem>
								</h:selectOneMenu>
							</div>
							<div class="input-item">
								<span class="block required">Ngày sinh <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" />
								</span>
								<h:inputText id="birthday" styleClass="input w80 date-picker" required="true"
									requiredMessage="Ngày sinh không được để trống"
									value="#{employee.staff_add.birthday}"
									converterMessage="Ngày sinh không hợp lệ">
									<f:convertDateTime pattern="yyyy-MM-dd"></f:convertDateTime>
								</h:inputText>
							</div>
							<div class="input-item">
								<span class="block required">Số điện thoại <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" />
								</span>
								<h:inputText id="cellphone" styleClass="input w80" maxlength="20"
								requiredMessage="Số điện thoại không được để trống" required="true"
								value="#{employee.staff_add.cellphone}"></h:inputText>
							</div>
							<div class="input-item">
								<span class="block required">Email</span>
								<h:inputText id="email" styleClass="input w80" maxlength="50" 
								requiredMessage="Email không được để trống" required="true"
								value="#{employee.staff_add.email}"></h:inputText>
							</div>
							<div class="textarea-item">
								<span class="block">Gia đình</span>
								<h:inputTextarea id="family" styleClass="textarea w80"
									value="#{employee.staff_add.family}"></h:inputTextarea>
								<span class="italic block w80">Cung cấp thông tin về gia đình và bản thân</span>
							</div></td>
						<td class="w50">
							<div class="input-item">
								<span class="block">Tình trạng</span>
								<h:selectOneMenu id="marital" styleClass="input w50"
									value="#{employee.staff_add.marital}">
									<f:selectItem itemValue="1" itemLabel="Single"></f:selectItem>
									<f:selectItem itemValue="2" itemLabel="Married"></f:selectItem>
								</h:selectOneMenu>
							</div>
							<div class="input-item">
								<span class="block">Số chứng minh nhân dân</span>
								<h:inputText styleClass="input w80" maxlength="20"
								value="#{employee.staff_add.identity_card}"></h:inputText>
							</div>
							<div class="input-item">
								<span class="block">Ngày cấp</span>
								<h:inputText id="date_of_issue" styleClass="input w80 date-picker"
									converterMessage="Ngày cấp không hợp lệ"
									value="#{employee.staff_add.date_of_issue}">
									<f:convertDateTime pattern="yyyy-MM-dd"></f:convertDateTime>
								</h:inputText>
							</div>
							<div class="input-item">
								<span class="block">Nơi cấp</span>
								<h:inputText id="place_of_issue" styleClass="input w80" 
									maxlength="50"
									value="#{employee.staff_add.place_of_issue}"></h:inputText>
							</div>
							<div class="textarea-item">
								<span class="block">Địa chỉ hộ khẩu</span>
								<h:inputTextarea id="address_permanent" styleClass="textarea w80"
								value="#{employee.staff_add.address_permanent}"></h:inputTextarea>
							</div>
							<div class="textarea-item">
								<span class="block">Địa chỉ thường trú</span>
								<h:inputTextarea id="address_current" styleClass="textarea w80"
								value="#{employee.staff_add.address_current}"></h:inputTextarea>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div class="input-panel">
				<span class="input-title">Thông tin công việc</span>
				<table class="input-column w100">
					<tr>
						<td class="w50">
							<div class="input-item">
								<span class="block">Loại nhân viên</span>
								<h:selectOneMenu id="type" styleClass="input w50" value="#{employee.staff_add.type}">
									<f:selectItem itemValue="1" itemLabel="Thủ việc"></f:selectItem>
									<f:selectItem itemValue="2" itemLabel="Chính thức"></f:selectItem>
								</h:selectOneMenu>								
							</div>
							<div class="input-item rel">
								<span class="block">Bộ phận</span>
								<h:selectOneMenu id="department" styleClass="input w50" 
									value="#{employee.staff_add.department.id}" required="true"
									requiredMessage="Hãy chọn phòng ban">
									<f:selectItems value="#{utilBean.listDepartment}"></f:selectItems>
								</h:selectOneMenu>
								<a class="open-newDepartmentDialog effect">
									<img align="absmiddle" src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/plus.png"/>
								</a>
								<h:commandLink class="effect load">
									<f:ajax listener="#{utilBean.refreshDepartment}" render="form:department :top"></f:ajax>
									<img align="absmiddle" src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/refresh.png"/>
								</h:commandLink>
							</div>
							<div class="input-item">
								<span class="block">Mã nhân viên</span>
								<h:inputText id="number" styleClass="input w80" maxlength="20"
									value="#{employee.staff_add.number}"></h:inputText>
							</div>
							<div class="input-item">
								<span class="block">Địa chỉ mail tại công ty</span>
								<h:inputText id="email_company" styleClass="input w80" maxlength="50"
								value="#{employee.staff_add.email_of_company}"></h:inputText>
								<span class="italic block w80">Địa chỉ email do công ty cung cấp</span>
							</div>
						</td>
						<td class="w50">
							<div class="input-item rel">
								<span class="block">Chức danh</span>
								<h:selectOneMenu id="designation" styleClass="input w50"
									value="#{employee.staff_add.designation.id}"
									required="true" requiredMessage="Bạn hãy chọn chức danh">
									<f:selectItems value="#{utilBean.listDesignation}"></f:selectItems>
								</h:selectOneMenu>
								<a class="effect open-newDesignationDialog">
									<img align="absmiddle" src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/plus.png"/>
								</a>
								<h:commandLink class="effect load">
									<f:ajax listener="#{utilBean.refreshDesignation}" render="form:designation :top"></f:ajax>
									<img align="absmiddle" src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/refresh.png"/>
								</h:commandLink>
							</div>
							<div class="input-item rel">
								<span class="block">Chi nhánh</span>
								<h:selectOneMenu id="branch" styleClass="input w50" 
									value="#{employee.staff_add.branch.id}" required="true" requiredMessage="Bạn hãy chọn chi nhánh">
									<f:selectItems value="#{utilBean.listBranch}"></f:selectItems>
								</h:selectOneMenu>
								<a class="effect open-newBranchDialog">
									<img align="absmiddle" src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/plus.png"/>
								</a>
								<h:commandLink class="load effect">
									<f:ajax listener="#{utilBean.refreshBranch}" render="form:branch :top"></f:ajax>
									<img align="absmiddle" src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/refresh.png"/>
								</h:commandLink>
							</div>
							<div class="input-item">
								<span class="block">Ngân hàng</span>
								<h:inputText id="bank" styleClass="input w80" maxlength="100"
								value="#{employee.staff_add.bank}"></h:inputText>
							</div>
							<div class="input-item">
								<span class="block">Tài khoản ngân hàng</span>
								<h:inputText id="account_number" styleClass="input w80" maxlength="20"
								value="#{employee.staff_add.account_number}"></h:inputText>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</h:form>	
		<!-- Department -->
		<h:form id="formNewDepartment">
			<f:event listener="#{department.initObject}" type="preRenderView"></f:event>
			<div class="wrap-dialog none" id="newDepartmentDialog">
				<div class="dialog">
					<span class="dialog-title">Thêm mới phòng ban<b
						class="close-dialog effect">x</b>
					</span>
					<div class="dialog-content">
						<table class="input-column w100">
							<tr>
								<td>
									<div class="input-item">
										<span class="block required">Tên phòng ban <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" /></span>
										<h:inputText id="dename" styleClass="input w80" required="true" requiredMessage="Tên không được để trống"
											value="#{department.department.name}" maxlength="100"></h:inputText>
										<span class="italic block">Tên phòng ban không được
											phép trùng nhau</span>
									</div></td>
							</tr>
							<tr>
								<td>
									<h:commandButton styleClass="button green-bt load" value="Tạo mới">
										<f:ajax execute=":formNewDepartment" listener="#{department.insert}"
										render=":messageForm" onevent="onMyEvent"></f:ajax>
									</h:commandButton>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</h:form>
		<h:form id="formNewDesignation">
			<f:event listener="#{designation.initObject}" type="preRenderView"></f:event>
			 <div class="wrap-dialog none" id="newDesignationDialog">
				<div class="dialog">
					<span class="dialog-title">Thêm mới vị trí<b class="close-dialog effect">x</b></span>
					<div class="dialog-content">
						<table class="input-column w100">
							<tr>
								<td>
									<div class="input-item">
			        					<span class="block required">Tên vị trí <img align="top"
										src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" /></span>
			        					<h:inputText id="desname" styleClass="input w80" value="#{designation.designation.name}"
			        					maxlength="100" required="true" requiredMessage="Tên không được để trống"></h:inputText>
			        					<span class="italic block">Tên vị trí không được phép trùng nhau</span>
			        				</div>
								</td>
							</tr>
							<tr>
								<td>
									<h:commandButton styleClass="button green-bt load" value="Tạo mới">
										<f:ajax execute=":formNewDesignation" listener="#{designation.insert}" 
										render=":messageForm" onevent="onMyEvent"></f:ajax>
								</h:commandButton></td>
							</tr>
						</table>						
					</div>
				</div>
			</div>
		</h:form>
		<h:form id="formNewBranch">
			<f:event listener="#{branch.initObject}" type="preRenderView"></f:event>
			 <div class="wrap-dialog none" id="newBranchDialog">
				<div class="dialog">
					<span class="dialog-title">Thêm mới chi nhánh<b class="close-dialog effect">x</b></span>
					<div class="dialog-content">
						<table class="input-column w100">
							<tr>
								<td>
									<div class="input-item">
			        					<span class="block required">Tên chi nhánh <img align="top"
										src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" /></span>
			        					<h:inputText id="braname" styleClass="input w80" value="#{branch.branch.name}" required="true"
			        					requiredMessage="Tên không được để trống"
			        					maxlength="100"></h:inputText>
			        					<span class="italic block">Tên chi nhánh không được phép trùng nhau</span>
			        					<span class="block">Mô tả</span>
			        					<h:inputTextarea styleClass="textarea w80 " value="#{branch.branch.description}"
			        					maxlength="100"></h:inputTextarea>
			        					<span class="italic block">Mô tả bao gồm địa chỉ, số điện thoại hoặc email...</span>
			        				</div>
								</td>
							</tr>
							<tr>
								<td><h:commandButton styleClass="button green-bt load" value="Tạo mới">
									<f:ajax execute=":formNewBranch" listener="#{branch.insert}"
									render=":messageForm" onevent="onMyEvent"></f:ajax>
								</h:commandButton></td>
							</tr>
						</table>						
					</div>
				</div>
			</div>
		</h:form>
		<span class="clear"></span>
		<script type="text/javascript">
		// <![CDATA[ 
			function onMyEvent(data) {
		    	var status = data.status;
			    switch (status) {
			        case 'begin':
			            break;
			        case 'complete':
			            break;
			        case 'success':
			        	$(".loading").removeClass("visible");
			        	$(".wrap-dialog").removeClass("block").addClass("none");
			            break;
			    }
			}
		// ]]> 
		</script>
	</ui:define>
</ui:composition>